<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>
    <%@include file="../common/header.jsp"%>
</head>
<body>
<jsp:include page="../common/nav.jsp">
    <jsp:param name="backgroud" value="/img/pet/top-cat-1.jpg"/>
</jsp:include>
<div class="main">
    <nav>
        <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="${pageContext.request.contextPath}/index.action">
                    <span itemprop="name">首页</span>
                </a>
                <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
                <span itemprop="name">我的喜爱</span>
                <meta itemprop="position" content="2">
            </li>
        </ol>
    </nav>

    <div class="coo-title">
        <h1 class="coo-hd-tittle">我的喜爱</h1>
    </div>
    <hr>
    <div class="container mb-2">
        <p class="coo-text-brown text-right">现在有 <strong class="coo-text-orange">${countPets}个</strong> 喜爱。</p>
    </div>
    <div class="container tim-container">
        <p class="coo-text-brown" >喜欢的猫猫就不准取消了哟，买回家也一样不要让小动物没有家！！！！！</p>
        <div class="space-30"></div>

        <!-- Dogs -->
        <div class="row">
            <h1 class="coo-hd-tittle">喜欢的猫猫</h1>
            <c:forEach items="${loveDogs}" var="dog">
                <div class="col-md-3">
                    <div class="thumbnail"><img src="${pageContext.request.contextPath}${dog.imagePath}" alt="${dog.name} - No.${dog.queryNumber} image">
                        <div class="caption">
                            <span class="label ${dog.sub == 1 ? 'label-danger' : 'label-success'}">${dog.sub == 1 ? '已预约' : '未预约'}</span>
                            <h5 class="coo-text-green text-center">${dog.name}</h5>
                            <p class="coo-text-lightbrown">【查询号码】${dog.queryNumber}<br>【性别】${dog.gender}<br>【生日】${dog.birthday}<br>【价格】${dog.price}</p>
                            <button name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href='${pageContext.request.contextPath}/dogsDetails.action?petdetail=${dog.queryNumber}'" >点击详情 »</button>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

        <!-- Cats -->
        <div class="row">
            <h1 class="coo-hd-tittle">喜欢的狗狗</h1>
            <c:forEach items="${loveCats}" var="cat">
                <div class="col-md-3">
                    <div class="thumbnail"><img src="${pageContext.request.contextPath}${cat.imagePath}" alt="${cat.name} - No.${cat.queryNumber} image">
                        <div class="caption">
                            <span class="label ${cat.sub == 1 ? 'label-danger' : 'label-success'}">${cat.sub == 1 ? '已预约' : '未预约'}</span>
                            <h5 class="coo-text-green text-center">${cat.name}</h5>
                            <p class="coo-text-lightbrown">【查询号码】${cat.queryNumber}<br>【性别】${cat.gender}<br>【生日】${cat.birthday}<br>【价格】${cat.price}</p>
                            <button name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" onclick="window.location.href='${pageContext.request.contextPath}/catsDetails.action?petdetail=${cat.queryNumber}'" >点击详情 »</button>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

    </div>


</div>
<%@include file="../common/footer.jsp"%>
<%@include file="../common/js.jsp"%>
</body>
</html>